<template>
  <audio :src="param.url"
         :width="detail.position.w"
         :height="detail.position.h"
         :type="param.sType"
         autoplay="false"
         controls
  />
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, watch, onMounted, PropType } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem } from 'stores/editorModels';
import { CMediaPropertyItem } from './mediaModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';


export default defineComponent({
  name: 'ViewMediaAudio',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {} as CGraphEntity
      }
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },
  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CMediaPropertyItem>({
      url: require('../../../assets/video/enya.mp3'),
      sType: 'audio/mpeg'
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);
    let myData = ref(1);

    //属性更新
    const configProperty = () => {
      //个性化属性
      if ((detail.value) && (detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        param.value.url = require('../../../assets/video/' + detail.value.propsItem[i++].value)
        param.value.sType = detail.value.propsItem[i++].value;
      } else {
        showMessage('MediaAudio组件属性设置错误');
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }

      //数据
      if (xyData.value.length > 0) {
        myData.value = xyData.value[0].value;
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    })

    //挂载组件
    onMounted(() => {
      init();
    });


    return {
      detail,
      param
    };
  }
});
</script>

<style scoped>

</style>
